<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/lib/bootstrap.min.css" />
		<script src="js/jquery.min.js"></script>
		<script src="js/lib/bootstrap.min.js"></script>
		<script src="js/lib/vue.min.js"></script>
		<script src="js/lib/vue-resource.js"></script>
		<script src="js/base.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<style>
		body{
			font-size:12px;
		}
		table,
		th,
		td {
			border: 1px solid grey;
			border-collapse: collapse;
			padding: 5px;
			vertical-align: middle !important;
		}		
		table td:nth-child(odd) {
			background-color: #f1f1f1;
			
		}
		table td:nth-child(even) {
			
		}
		table tr:nth-child(even) {
			background-color:#ffffff;
		}
	</style>
	<body>
		<div class="" id="box" >
		<div style="padding:15px 5px 0px 5px;border:3px solid #ccc;margin-bottom:15px">
			<table class="table table-hover">				
				<tbody>
					<tr>
						<th colspan="8">添加黑名单：</th>
					</tr>
					<tr>
						<td>手机号码:</td>
						<td colspan="3">
						<input id="msg0" type="text" class="form-control" style="width:280px;" placeholder="输入手机号码"/>
						</td>
						<td>黑名单类型:</td>
						<td colspan="3">
							<select name="" id="msg1" class="form-control" style="width:280px;">
								<option value="">请选择</option>
								<option value="0">登陆</option>
								<option value="1">交易</option>
							</select>
						</td>						
					</tr>
					<tr>						
						<td colspan="8">
								<button v-on:click="add()" class="btn btn-danger" style="display:block;margin:0 auto;">加入黑名单</button>  
						</td>										
					</tr>
				</tbody>
			</table>		
		</div>
		<div style="padding:15px 5px 0px 5px;border:3px solid #ccc;margin-bottom:15px">
			<table class="table table-hover">				
				<tbody>
					<tr>
						<th colspan="8">查询黑名单：</th>
					</tr>
					<tr>
						<td>手机号码:</td>
						<td colspan="3">
						<input id="dianhua" type="text" class="form-control" style="width:280px;" placeholder="输入手机号码"/>
						</td>
						<td>黑名单类型:</td>
						<td colspan="3">
							<select name="" id="leixing" class="form-control" style="width:280px;">
								<option value="">请选择</option>
								<option value="0">登陆</option>
								<option value="1">交易</option>
							</select>
						</td>						
					</tr>
					<tr>						
						<td colspan="8">
								<button v-on:click="chaxun()" class="btn btn-danger" style="display:block;margin:0 auto;">查询一个黑名单</button>  
						</td>										
					</tr>
					<tr>
						<td id="resText" colspan="8" class="text-center" style="display: none;"></td>
					</tr>
				</tbody>
			</table>		
		</div>
		
		<div style="padding:15px 5px 0px 5px;border:3px solid #ccc;margin-bottom:15px;display:none;">
			<table class="table table-hover">				
				<tbody>
					<tr>
						<th colspan="8">查询所有黑名单：</th>
					</tr>					
					<tr>						
						<td colspan="8">
								<button v-on:click="chaxun2()" class="btn btn-danger" style="display:block;margin:0 auto;">查询所有黑名单</button>  
						</td>										
					</tr>
					<tr>
						<td class="text-center">手机号</td>
						<td class="text-center">用户id</td>
						<td class="text-center">代理商</td>
						<td class="text-center">拉黑类型</td>
						<td class="text-center">拉黑时间</td>						
					</tr>
					<tr v-for="i in list">						
						<td class="text-center">{{i.phone}}</td>
						<td class="text-center">{{i.userid}}</td>
						<td class="text-center">{{i.brandid}}</td>
						<td class="text-center">{{i.operationType | todo}}</td>
						<td class="text-center">{{i.createTime}}</td>
					</tr>
				</tbody>
			</table>		
		</div>
		<!--删除黑名单-->
		<div style="padding:15px 5px 0px 5px;border:3px solid #ccc;margin-bottom:15px">
			<table class="table table-hover">				
				<tbody>
					<tr>
						<th colspan="8">删除一个黑名单：</th>
					</tr>
					<tr>
						<td>手机号码:</td>
						<td colspan="3">
						<input id="m1" type="text" class="form-control" style="width:280px;" placeholder="输入手机号码"/>
						</td>
						<td>黑名单类型:</td>
						<td colspan="3">
							<select name="" id="m2" class="form-control" style="width:280px;">
								<option value="">请选择</option>
								<option value="0">登陆</option>
								<option value="1">交易</option>
							</select>
						</td>						
					</tr>
					<tr>						
						<td colspan="8">
								<button v-on:click="del()" class="btn btn-danger" style="display:block;margin:0 auto;">删除一个黑名单</button>  
						</td>										
					</tr>
					<tr>
						<td id="resText" colspan="8" class="text-center" style="display: none;"></td>
					</tr>
				</tbody>
			</table>		
		</div>
		</div>
	</body>
	<script>
		$(function(){
		/*自定义过滤器*/	
		Vue.filter("todo",function(value){
			if(value == 0){
				return value = "登陆"
			}
			if(value == 1){
				return value = "交易"
			}
		})
			
	new Vue({
				el:"#box",
				data:{
					list:[]
				},
				methods:{
					/*添加一个黑名单*/
					add:function(){
						alert("添加黑名单")
						var msg0 = $('#msg0').val();
						var msg1 = $('#msg1').val();
						console.log(msg0);
						console.log(msg1);
						this.$http.post(window.baseUrl+"risk/blackwhite/add",{phone:msg0,operation_type:msg1},{emulateJSON:true}).then( 
								   function (res) { 
								    console.log(res)
								    alert("添加成功")
								   },function (res) { 
								   	console.log("失败")
								   } 
								  );
					},
					/*查询所有黑名单*/
					chaxun2:function(){
						var _this = this
						this.$http.post(window.baseUrl+"risk/blackwhite/query/all",{},{emulateJSON:true}).then( 
								   function (res) { 
								    console.log(res.data.result.content)
								    
								    if(res.data.result.content.length<=0){
								    	alert('暂无数据')
								    }else{
								    	this.list = res.data.result.content
								    }
								   $('#resTexts').show()							
								   },function (res) { 
								   	console.log("失败")
								   } 
								  );
					},						
					/*按条件查询单个黑名单*/
					chaxun:function(){
						console.log("点击查询")
						/*获取到input框里的数据*/
						var n1 = $('#dianhua').val();
						var n2 = $("#leixing").val();
						console.log(n1)
                        console.log(n2);
						$.ajax({	
							type:"POST",
						    url:window.baseUrl+"risk/blackwhite/query/phone",						    
						    dataType: "json",
						    /*把input框的数据作为参数发送到后台*/
                            data:{
                                phone:n1,
                                operation_type:n2
							},
                            dataType:'json',
			                success:function(data){
			                    console.log(data)
			                    var html =data.resp_message;
			                    $('#resText').show();
                         		$('#resText').html(html);
			                },
			        		error:function(){
			        			console.log("请求失败");
			        		}
						});
					},
					del:function(){						
						var m1 = $('#m1').val();
						var m2 = $('#m2').val();
						if(m1!=""&&m2!=""){
							this.$http.post(window.baseUrl+"risk/blackwhite/del/phone",{phone:m1,operation_type:m2},{emulateJSON:true}).then( 
								   function(res){ 
								    console.log(res.data)
								    alert("删除成功")
								    this.list = res.data
								   },function(res){ 
								   	alert("失败")
								   } 
								  );
						}else{
							alert('请完善删除信息')
						}
						
					}
					
				}
			})
			
		})
	</script>
</html>

